<!--
 * @Description: 用户管理
 * @Author: rendc
 * @Date: 2021-09-13 11:52:59
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-14 12:16:49
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <!-- jQuery -->
  <script src="../../js/jquery.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>
</head>

<body>
  <div class="header">用户管理</div>
  <button id="addUserBtn" class="btn btn-primary">新增</button>
  <button id="addUserBtn" class="btn btn-danger">批量删除</button>
  <table class="table">
    <thead>
      <tr>
        <th>id</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <!-- 新增用户modal -->
  <div class="modal" id="myModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">新增用户</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="input1" class="col-sm-2 control-label">
                姓名：
              </label>
              <input id="myInput" type="text" class="form-control" name="username">
            </div>
            <div class="form-group">
              <label for="input2" class="col-sm-2 control-label">
                密码：
              </label>
              <input type="password" class="form-control" name="password">
            </div>
            <div class="form-group">
              <label for="input2" class="col-sm-2 control-label">
                性别：
              </label>
              <select class="form-select gender-select" aria-label="Default select example">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="form-group">
              <label for="input2" class="col-sm-2 control-label">
                电话：
              </label>
              <input type="telephone" class="form-control" name="telephone">
            </div>
            <div class="form-group">
              <label for="input2" class="col-sm-2 control-label">
                地址：
              </label>
              <input type="address" class="form-control" name="address">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" id="saveModalCecal" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" id="saveModalConfirm" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  $(function () {})
  var baseURL = "http://203.195.246.58:8888"
  loadAllUser()

  // 根据用户ID删除用户
  $("tbody").on({
    click: function () {
      // alert("删除")
      var inputId = $(this)[0].parentElement.parentElement.firstElementChild.firstElementChild;
      var id = $(inputId).val();
      $.ajax({
        url: baseURL + "/baseUser/deleteById?id=" + id,
        headers: {
          "Authorization": sessionStorage.getItem('token')
        },
        success: function (res) {
          alert("id为" + id + "的用户被删除了")
          // 查询数据
          loadAllUser()
        }
      })
    }
  }, ".del")
  // 查询所有用户信息
  function loadAllUser() {
    $("tbody").empty()
    $.ajax({
      url: baseURL + "/baseUser/findAll",
      headers: {
        "Authorization": sessionStorage.getItem('token')
      },
      success: function (res) {
        // console.log(res);
        res.data.forEach(function (item) {
          // console.log(item.id);
          var newTr = $(`<tr>
        <td>
          <input type="checkbox" value = ` + item.id + ` \/>
        </td>
        <td>
          ` + item.username + `
        </td>
        <td>
          ` + item.gender + `
        </td>
        <td>
          ` + item.telephone + `
        </td>
        <td>
          ` + item.address + `
        </td>
        <td class="operation">
          <span class="edit">编辑</span>
          <span class="del">删除</span>
        </td>
      </tr>`)
          $('tbody').append(newTr);
        });
      }
    })
  }
  // 打开新增用户模态框
  $("#addUserBtn").on('click', function () {
    $("#myModal").show();
    // 打开模态框时，聚焦第一个输入框 方便用户操作
    var myInput = document.getElementById('myInput')
    myInput.focus()
  })
  // 关闭模态框
  $(".btn-close").on('click', function () {
    $("#myModal").hide();
    clearSaveModal();
  })
  // 保存模态框-取消按钮
  $("#saveModalCecal").on('click', function () {
    $("#myModal").hide();
    clearSaveModal();
  })
  // 清空模态框
  function clearSaveModal() {
    console.log("清空模态框");
    $("input[name=username]").val("");
    $("input[name=password]").val("");
    $(".gender-select").val("男");
    $("input[name=telephone]").val("");
    $("input[name=address]").val("");
  }
  // 保存模态框-确定按钮
  $("#saveModalConfirm").on('click', function () {
    var username = $("input[name=username]").val();
    var password = $("input[name=password]").val();
    var gender = $(".gender-select").val();
    var telephone = $("input[name=telephone]").val();
    var address = $("input[name=address]").val();
    var obj = {
      username,
      gender,
      password,
      telephone,
      address,
    }
    $.ajax({
      url: baseURL + "/baseUser/saveOrUpdate",
      method: "post",
      headers: {
        "Authorization": sessionStorage.getItem('token')
      },
      data: obj,
      success: function (res) {
        alert(res.message);
        $("#myModal").hide();
        loadAllUser();
        clearSaveModal();
      }
    })
  })
  // 编辑 - 用新增的模态框就行

  // 批量删除
  $("button:contains(批量删除)").on({
    click: function () {
      var ids = $("input[type=checkbox]:checked")
      ids.map(function (i, item) {
        var id = $(item).val();
        // 调用删除的方法
        console.log("id为" + id + "的用户被删除");
      })
    }
  })
</script>

</html>